<template>
	<el-dialog :title="title" v-model="visible" :width="1200" destroy-on-close @closed="$emit('closed')" >
		<vxe-toolbar>
			<template #buttons>
				<vxe-button :disabled="form.columnList.length === 0" @click="insertEvent(-1)">新增</vxe-button>
				<vxe-button :disabled="form.columnList.length === 0" @click="$refs.xTable.removeCheckboxRow()">删除选中</vxe-button>
			</template>
		</vxe-toolbar>
		<el-form :model="form"  ref="dialogForm" label-width="100px" label-position="left">
			<vxe-table
				ref="xTable"
				border
				keep-source
				show-overflow
				:column-config="{resizable: true}"
				:data="form.dataList"
				:edit-rules="rules"
				:checkbox-config="{labelField: 'rowId', highlight: true, range: true}"
				:edit-config="{trigger: 'dblclick', mode: 'cell'}">
				<vxe-column type="seq" width="60"></vxe-column>
				<vxe-column type="checkbox" title="rowId" width="140"></vxe-column>
				<template v-for="(item, index) in form.columnList" :key="index">
					<vxe-column v-if="item.type  == 'text'" :field="item.tag" :title="item.title" :edit-render="{}">
						<template #edit="{ row }">
							<vxe-input v-model="row[item.tag]" type="text"></vxe-input>
						</template>
					</vxe-column>
					<vxe-column v-if="item.type  == 'date'" :field="item.tag" :title="item.title" :edit-render="{}">
						<template #edit="{ row }">
							<vxe-input v-model="row[item.tag]" type="date" transfer></vxe-input>
						</template>
					</vxe-column>
					<vxe-column v-if="item.type  == 'human'" :field="item.tag" :title="item.title" :edit-render="{}">
						<template #default="{ row }">
							<span>{{row[item.tag]?.username}}</span>
						</template>
						<template #edit="{ row }">
							<yh-human-resource-select v-model="row[item.tag]"></yh-human-resource-select>
						</template>
					</vxe-column>
					<vxe-column v-if="item.type  == 'org'" :field="item.tag" :title="item.title" :edit-render="{}">
						<template #default="{ row }">
							<span>{{row[item.tag]?.title}}</span>
						</template>
						<template #edit="{ row }">
							<yh-organization-select v-model="row[item.tag]"></yh-organization-select>
						</template>
					</vxe-column>
				</template>
			</vxe-table>
		</el-form>
		<template #footer>
			<el-button @click="visible=false" >取 消</el-button>
			<el-button type="primary" :loading="isSaving" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>
</template>

<script>
import YhHumanResourceSelect from "@/components/xunheng/yhHumanResourceSelect";
import YhOrganizationSelect from "@/components/xunheng/yhOrganizationSelect";
export default {
	name: "dataEdit",
	components: {YhOrganizationSelect, YhHumanResourceSelect},
	data(){
		return{
			title:"编辑矩阵数据",
			visible: false,
			isSaving: false,
			form: {
				columnList:[],
				dataList:[]
			},
			rules: {
			},
			addTemplate:{}
		}
	},
	mounted() {},
	methods: {
		async insertEvent(row){
			const $table = this.$refs.xTable
			const { row: newRow } = await $table.insertAt(this.addTemplate, row)
			await $table.setEditRow(newRow)
		},
		//显示
		open(){
			this.visible = true;
			return this;
		},
		async submit(){
			const $table = this.$refs.xTable
			const {insertRecords,removeRecords,updateRecords} =  $table.getRecordset();
			let param = {
				id:this.form.id,
				insertRecords:insertRecords,
				removeRecords:removeRecords,
				updateRecords:updateRecords
			}
			const errMap = await $table.fullValidate();
			if (!errMap) {
				this.isSaving = true;
				var res = await this.$API.system.matrixData.save.post(param);
				if(res.success){
					this.visible = false;
					this.$message.success("保存成功")
					this.$emit('success', this.form, this.mode)
				}
				this.isSaving = false;
			}
		},
		initConfig(){
      if(this.form.columnList.length === 0){
        this.addTemplate = JSON.parse("{}");
        return;
      }
			//let  rulesStr = '{'
			let metaStr = '{'
			this.form.columnList.forEach(column => {
				let tag = column.tag;
        /* title = column.title;
        let message = title +" 不能为空";
        let rule = '"'+tag +'": [ { "required": true, "message": "'+message+'" }],';
        rulesStr = rulesStr +rule;*/
				metaStr = metaStr + '"'+tag +'": "",';
			})
			//rulesStr = rulesStr.substr(0,rulesStr.length - 1) + "}";
			metaStr = metaStr.substr(0,metaStr.length - 1) + "}";
			//this.rules = JSON.parse(rulesStr);
			this.addTemplate = JSON.parse(metaStr);
		},
		//表单注入数据
		setData(data){
			this.form.id = data.id;
			this.form.columnList = data.columnList || []
			this.form.dataList = data.dataList || []
			//处理是json字符串的数据
			this.form.dataList.forEach(data =>{
				for (let key in data) {
					if(data[key].indexOf("{") != -1){
						 let jo = data[key]
							.replaceAll(' ','')
							.replaceAll(',','","')
							.replaceAll('{','{"')
							.replaceAll('}','"}')
							.replaceAll('=','":"')
						data[key] = JSON.parse(jo)
					}
				}
			})
			//初始化提交规则与元数据
			this.initConfig();
		},
	}
}
</script>

<style>
.vxe-select--panel {
	position: fixed !important;
	min-width: 10% !important;
	left: auto !important;
	z-index: 9997 !important
}
.vxe-dropdown--panel {
	z-index: 2010 !important
}
.vxe-input--panel.type--date, .vxe-input--panel.type--month, .vxe-input--panel.type--week, .vxe-input--panel.type--year {
  z-index: 9998 !important
}
</style>
